const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取js中的css为单独文件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css文件 
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


// 设置node环境变量
// process.env.NODE_ENV = 'development' 


module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // 处理css资源，样式资源会打包到js中，所以不会输出单独的样式文件 
            {
                test: /\.css$/,
                use: [
                    // 从底向上依次执行 
                    // 'style-loader',  // js代码中创建style标签，将样式放入 
                    MiniCssExtractPlugin.loader, // 取代style-loader，作用：提取js中的css成单独文件 
                    'css-loader', // 将css文件整合到js中 
                    /*
                        css兼容性处理：postcss -> npm i postcss-loader  postcss-preset-env 
                        这个loader能帮助css识别某些环境，从而加载指定的配置，能够兼容到某个浏览器的版本 
                        两种用法：
                            1.使用loader的默认配置 直接写字符串 'postcss-loader'；
                            2.修改loader配置，对象方式；
                    */
                   {
                       loader: 'postcss-loader',
                       options: {
                           postcssOptions: {
                                plugins: [
                                    // postcss的插件 
                                    /* 
                                        postcss-preset-env这个插件帮助postcss找到package.json中browserslist里面的配置，通过配置加载指定
                                        的css兼容性样式。
                                        注：package.json跟node_modules在同级目录。 

                                        "browserslist": {
                                            // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development 
                                            "development": [
                                            "last 1 chrome version",
                                            "last 1 firefox version",
                                            "last 1 safari version"
                                            ],
                                            // 生产环境：默认看生产环境 
                                            "production": [
                                            ">0.2%",
                                            "not dead",
                                            "not op_mini all"
                                            ]
                                        }

                                    */ 
                                    require('postcss-preset-env')()
                                ]
                           }
                       }
                   }

                ]
            },
            // 处理html中的图片资源，如img标签引入的图片 
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
        ]
    },
    plugins: [
        // html处理 
        new HtmlWebpackPlugin({
            template: './src/index.html' 
        }),
        // 从js中提取css为单独文件 
        new MiniCssExtractPlugin({
            // 对输出的文件重命名 
            filename: 'css/built.css'
        }),
        // 压缩css文件 
        new optimizeCssAssetsWebpackPlugin() 
    ],
    mode: 'development'
}




